const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'),
    filename: 'index.html'
})
module.exports = {
    mode: 'development',
    plugins: [
        htmlPlugin
    ],
    module: {
        rules: [
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
            {test:/\.css$/,use:['style-loader','css-loader']}, //第三方css不使用模块化
            // {test:/\.css$/,use:['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:4]']} //在css-loader后加参数，启用模块化和自定义类名，写成一行不行，要写成下方格式
            // {
            //     test: /\.css$/,
            //     use: [
            //         { loader: 'style-loader' },
            //         {
            //             loader: 'css-loader',
            //             options: {
            //                 modules: {
            //                     localIdentName: '[path][name]-[local]-[hash:4]'
            //                 }
            //             }
            //         }
            //     ]
            // },
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: ['url-loader'] },
            { test: /\.(jpg|bmp|png|gif)$/, use: ['url-loader?limit=5000&name=[hash:4]-[name].[ext]'] },

            //自定义css样式以less或者scss后缀结尾，同时启用模块化,启用模块化后在css文件中才能向外export一个对象，但此时类名比较复杂，通过localidentName为其重命名
            {
                test: /\.less$/, use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: '[path][name]-[local]-[hash:4]'
                            }
                        }
                    }, 'less-loader']
            },
            {
                test: /\.scss$/, use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: '[path][name]-[local]-[hash:4]'
                            }
                        }
                    }, 'sass-loader']
            },
            { test: /\.json$/, use: ['json-loader'] },


        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'], //省略后缀
        alias: { //表示别名
            '@': path.join(__dirname, './src')
        }
    }

}